<form nz-form [nzLayout]="'inline'" [formGroup]="validateForm">
  <nz-form-item>
    <nz-form-control>
      <nz-input-group>
        <input formControlName="paperTitle" nz-input placeholder="试卷名称"/>
      </nz-input-group>
      <nz-form-explain
        *ngIf="
          validateForm.get('paperTitle')?.dirty &&
          validateForm.get('paperTitle')?.errors
        "
      >请输入试卷名称
      </nz-form-explain>
    </nz-form-control>
  </nz-form-item>
  <!-- 单选单项分值 -->
  <nz-form-item>
    <nz-form-control>
      <nz-input-group>
        <input
          formControlName="choiceScore"
          nz-input
          type="number"
          placeholder="选择题单项分值"
        />
      </nz-input-group>
      <nz-form-explain
        *ngIf="
          validateForm.get('choiceScore')?.dirty &&
          validateForm.get('choiceScore')?.errors
        "
      >请输入选择题单项分值
      </nz-form-explain>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-control>
      <nz-input-group>
        <input
          formControlName="blankScore"
          nz-input
          type="number"
          placeholder="填空题单项分值"
        />
      </nz-input-group>
      <nz-form-explain
        *ngIf="
          validateForm.get('blankScore')?.dirty &&
          validateForm.get('blankScore')?.errors
        "
      >请输入填空题单项分值
      </nz-form-explain>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-control>
      <nz-input-group>
        <input
          formControlName="answerScore"
          nz-input
          type="number"
          placeholder="简答题单项分值"
        />
      </nz-input-group>
      <nz-form-explain
        *ngIf="
          validateForm.get('answerScore')?.dirty &&
          validateForm.get('answerScore')?.errors
        "
      >请输入简答题单项分值
      </nz-form-explain>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-control>
      <nz-input-group>
        <input
          formControlName="codeScore"
          nz-input
          type="number"
          placeholder="代码题单项分值"
        />
      </nz-input-group>
      <nz-form-explain
        *ngIf="
          validateForm.get('codeScore')?.dirty &&
          validateForm.get('codeScore')?.errors
        "
      >请输入代码题单项分值
      </nz-form-explain>
    </nz-form-control>
  </nz-form-item>

  <nz-form-item>
    <nz-form-control>
      <nz-input-group>
        <input
          formControlName="algorithmScore"
          nz-input
          type="number"
          placeholder="算法题单项分值"
        />
      </nz-input-group>
      <nz-form-explain
        *ngIf="
          validateForm.get('algorithmScore')?.dirty &&
          validateForm.get('algorithmScore')?.errors
        "
      >请输入算法题单项分值
      </nz-form-explain>
    </nz-form-control>
  </nz-form-item>
</form>

<nz-divider></nz-divider>

<p>请选择组卷方式</p>
<button nz-button nzType="default" (click)="generatePaper(false)">
  手动组卷
</button>
<!--<button nz-button nzType="default" (click)="generatePaper(true)">-->
<!--  自动组卷-->
<!--</button>-->

<div [ngSwitch]="isAuto">
  <div *ngSwitchCase="true">1</div>
  <!-- 手动组卷 -->
  <div *ngSwitchCase="false">
    <!-- 难度 总分 -->
    <nz-row [nzGutter]="16">
      <nz-col [nzSpan]="8">
        <nz-statistic
          [nzValue]="totalScore | number"
          [nzTitle]="'总分'"
        ></nz-statistic>
      </nz-col>
      <nz-col [nzSpan]="8">
        <nz-statistic
          [nzValue]="diffiTotal | number: '0.0-2'"
          [nzTitle]="'难度'"
        ></nz-statistic>
      </nz-col>
      <nz-col [nzSpan]="8">
        <nz-statistic
          [nzValue]="titleTottal | number: '0.0-2'"
          [nzTitle]="'题量'"
        ></nz-statistic>
      </nz-col>
    </nz-row>

    <nz-tabset [nzType]="'card'" [nzSelectedIndex]="index">
      <nz-tab *ngFor="let tab of tabsName" [nzTitle]="titleTemplate">
        <ng-template #titleTemplate>
          <div>
            {{ tab }}
          </div>
        </ng-template>
        <!-- 试题列表 -->
        <span [ngSwitch]="type">
          <div *ngSwitchCase="1">
            <!-- 选择题 -->
            <ng-container *ngIf="tab === '选择题'">
              <div class="type-title">选择题</div>
              <nz-checkbox-wrapper
                style="width: 100%;"
                (nzOnChange)="choiceLog($event)"
              >
                <div nz-row>
                  <div nz-col>
                    <label
                      class="check-label"
                      nz-checkbox
                      nzValue="{{ item.value }}"
                      *ngFor="let item of choiceTitleList"
                    >{{ item.label }}</label
                    >
                  </div>
                </div>
              </nz-checkbox-wrapper>
            </ng-container>
            <!-- 填空题 -->
            <ng-container *ngIf="tab === '填空题'">
              <div class="type-title">填空题</div>
              <nz-checkbox-wrapper
                style="width: 100%;"
                (nzOnChange)="blankLog($event)"
              >
                <div nz-row>
                  <div nz-col>
                    <label
                      class="check-label"
                      nz-checkbox
                      nzValue="{{ item.value }}"
                      *ngFor="let item of blankTitleList"
                    >{{ item.label }}</label
                    >
                  </div>
                </div>
              </nz-checkbox-wrapper>
            </ng-container>
            <!-- 简答题 -->
            <ng-container *ngIf="tab === '简答题'">
              <div class="type-title">简答题</div>
              <nz-checkbox-wrapper
                style="width: 100%;"
                (nzOnChange)="answerLog($event)"
              >
                <div nz-row>
                  <div nz-col>
                    <label
                      class="check-label"
                      nz-checkbox
                      nzValue="{{ item.value }}"
                      *ngFor="let item of answerTitleList"
                    >{{ item.label }}</label
                    >
                  </div>
                </div>
              </nz-checkbox-wrapper>
            </ng-container>
            <!-- 代码题 -->
            <ng-container *ngIf="tab === '代码题'">
              <div class="type-title">代码题</div>
              <nz-checkbox-wrapper
                style="width: 100%;"
                (nzOnChange)="codeLog($event)"
              >
                <div nz-row>
                  <div nz-col>
                    <label
                      class="check-label"
                      nz-checkbox
                      nzValue="{{ item.value }}"
                      *ngFor="let item of codeTitleList"
                    >{{ item.label }}</label
                    >
                  </div>
                </div>
              </nz-checkbox-wrapper>
            </ng-container>
            <!-- 算法题 -->
            <ng-container *ngIf="tab === '算法题'">
              <div class="type-title">算法题</div>
              <nz-checkbox-wrapper
                style="width: 100%;"
                (nzOnChange)="algorithmLog($event)"
              >
                <div nz-row>
                  <div nz-col>
                    <label
                      class="check-label"
                      nz-checkbox
                      nzValue="{{ item.value }}"
                      *ngFor="let item of algorithmTitleList"
                    >{{ item.label }}</label
                    >
                  </div>
                </div>
              </nz-checkbox-wrapper>
            </ng-container>
          </div>
          <div *ngSwitchCase="2">

          </div>
          <div *ngSwitchDefault>3</div>
        </span>
      </nz-tab>
    </nz-tabset>
  </div>
  <div *ngSwitchDefault></div>
</div>
